<script setup lang="ts">
import {ref} from 'vue';
const props = defineProps({
  timeList: {
    type: Array<any>,
    required: true
  },
  reverse: {
    type: Boolean,
    default: false
  }
});

const sort = ref<boolean>(props.reverse)

const emit = defineEmits(['clickLeftByMonthCallback']);

function clickLeft(item: any) {
  emit('clickLeftByMonthCallback', item.content)
}
</script>

<template>
  <div class="sortLeftByMonth">
    <a-switch v-model:checked="sort" checked-children="倒序" un-checked-children="正序"/>
    <div class="time mt-6">
      <a-timeline :reverse="sort">
        <template v-for="(item) in timeList">
          <a-timeline-item class="cursor-pointer" @click="clickLeft(item)">
            {{ item.content }}
          </a-timeline-item>
        </template>
      </a-timeline>
    </div>
  </div>
</template>

<style scoped lang="less">

</style>
